<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/jsp/includeTop.jsp" %>
<%@ include file="/WEB-INF/jsp/includeTaglib.jsp" %>
<table width="100%" border="0" cellpadding="0" cellspacing="5">
  <tr>
    <td valign="top">
      <table class="dbborder" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="bottom" class="blueTableBg">&nbsp;配置管理&nbsp;-&nbsp;门店地图数据维护</td>
        </tr>

		<tr>
		  <td>
		    <table width="100%" border="0" cellpadding="0" cellspacing="5">
		      <tr>
		        <td>
		          <table width="100%" border="0" cellpadding="0" cellspacing="0">
		            <tr>
		              <td class="dashTopLeft"><img src="images/spacer.gif" width="7" height="7"></td>
		              <td class="dashTop" width=100%><img src="images/spacer.gif" width="7" height="7"></td>
		              <td class="dashTopRight"><img src="images/spacer.gif" width="7" height="7"></td>
		            </tr>
		            <tr>
		              <td class="dashLeft"><img src="images/spacer.gif" width="7" height="7"></td>
		              <td align="center">
		                <table width="100%" border="0" cellpadding="0" cellspacing="3">
		                  <form id="searchForm" action="<c:url value='searchFunctionTemplateByPage.html' />" method="get">
		                  <tr>
		                    <td width="10%" height="20" class="globalText">通路</td>
		                    <td colspan="2" width="30%" height="20" class="globalText">
		                    	<select name="functionTypeSlt">
		                    	  <option value="">----</option>
		                    	  <option value="0" selected>数据函数</option>
		                    	  <option value="1">系统函数</option>
		                    	</select>
		                    	<select name="functionTypeSlt">
		                    	  <option value="">----</option>
		                    	  <option value="0" selected>数据函数</option>
		                    	  <option value="1">系统函数</option>
		                    	</select>
		                    	<select name="functionTypeSlt">
		                    	  <option value="">----</option>
		                    	  <option value="0" selected>数据函数</option>
		                    	  <option value="1">系统函数</option>
		                    	</select>
		                    </td>
		                    <td width="20%" height="20" class="globalText">
		                    </td>
		                    <td width="10%" height="20" class="globalText"></td>
		                    <td width="10%" height="20" class="globalText">
		                    </td>
		                    <td width="20%" >&nbsp;</td>
		                  </tr>
		                  <tr>
		                    <td width="10%" height="20" class="globalText">地区</td>
		                    <td colspan="2" width="30%" height="20" class="globalText">
		                    	<select name="functionTypeSlt">
		                    	  <option value="">----</option>
		                    	  <option value="0" selected>数据函数</option>
		                    	  <option value="1">系统函数</option>
		                    	</select>
		                    	<select name="functionTypeSlt">
		                    	  <option value="">----</option>
		                    	  <option value="0" selected>数据函数</option>
		                    	  <option value="1">系统函数</option>
		                    	</select>
		                    </td>
		                    <td width="20%" height="20" class="globalText">
		                    </td>
		                    <td width="10%" height="20" class="globalText"></td>
		                    <td width="10%" height="20" class="globalText">
		                    </td>
		                    <td width="20%" >&nbsp;</td>
		                  </tr>
		                  <tr>
		                    <td width="10%" height="20" class="globalText">查询</td>
		                    <td width="20%" height="20" class="globalText">
		                    	<input type="text" class="txtbox" size="20" name="functionName" value="" />
		                    </td>
		                    <td width="10%" height="20" class="globalText"></td>
		                    <td width="20%" height="20" class="globalText">
		                    </td>
		                    <td width="10%" height="20" class="globalText"></td>
		                    <td width="10%" height="20" class="globalText">
		                    </td>
		                    <td width="20%" >&nbsp;</td>
		                  </tr>
		                  <tr>
		                    <td align="left"><input type="button" id="searchBtn" class="btnStyle" value="  查询  "></td>
		                  </tr>
		                  </form>
		                </table>
		              </td>
		              <td class="dashRight"><img src="images/spacer.gif" width="7" height="7"></td>
		            </tr>
		            <tr>
		              <td class="dashBottomLeft"><img src="images/spacer.gif" width="7" height="7"></td>
		              <td class="dashBottom" width=100%><img src="images/spacer.gif" width="7" height="7"></td>
		              <td class="dashBottomRight"><img src="images/spacer.gif" width="7" height="7"></td>
		            </tr>
		          </table>
		        </td>
		      </tr>
		    </table>
		  </td>
		</tr>
        <tr>
          <td>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<div class="globalText" style="padding: 10px;">
            		<div class="storelist">
            			<div style="height: 40px;">终端</div>
            			<div>
							<ul>
								<li class="storeitem" >
										<font style="font-weight: bolder;">武福福乐福福乐福</font>
										<p>武宁路xx号武宁路xx号武宁路xx号武宁路xx号武宁路xx号</p>
								</li>
								<li class="storeitem" >
										<font style="font-weight: bolder;">武福福乐福福乐福</font>
										<p>武宁路xx号武宁路xx号武宁路xx号武宁路xx号武宁路xx号</p>
								</li>
								<li class="storeitem" >
										<font style="font-weight: bolder;">武福福乐福福乐福</font>
										<p>武宁路xx号武宁路xx号武宁路xx号武宁路xx号武宁路xx号</p>
								</li>
								<li class="storeitem" >
										<font style="font-weight: bolder;">武福福乐福福乐福</font>
										<p>武宁路xx号武宁路xx号武宁路xx号武宁路xx号武宁路xx号</p>
								</li>
								<li class="storeitem" >
										<font style="font-weight: bolder;">武福福乐福福乐福</font>
										<p>武宁路xx号武宁路xx号武宁路xx号武宁路xx号武宁路xx号</p>
								</li>
								<li class="storeitem" >
										<font style="font-weight: bolder;">武福福乐福福乐福</font>
										<p>武宁路xx号武宁路xx号武宁路xx号武宁路xx号武宁路xx号</p>
								</li>
							</ul>
						</div>
            		</div>
            		<div class="storeMap">
            			<div style="height: 40px;">地图</div>
            			<div id="mapContainer" style="height: 100%;height: 58%;">
						    Loading......
						</div>
						<div>
							GPS信息：<span id="lat"></span>, <span id="lng"></span>
							<input type="button" id="searchBtn" class="btnStyle" value="更新 ">
						</div>
            		</div>
            	</div>



<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
	
	$('.storeitem').each(function(){
		$(this).bind({
			mouseout:function(){
				$(this).css('background','');
			},
			mouseover:function(){
				$(this).css('background','#eee');
			},
			click:function(){
				//TODO
			}
		});

	});


	var map = new BMap.Map("mapContainer");
	
	var point = new BMap.Point(121.503494, 31.249841);
	map.centerAndZoom('上海');
	
	$('#lat').html(31.249841);
	$('#lng').html(121.503494);
	
	map.enableScrollWheelZoom();                  
	map.enableKeyboard();                        
	map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
	map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
	var opts = {anchor: BMAP_ANCHOR_BOTTOM_LEFT  , offset: new BMap.Size(10, 90)};
	map.addControl(new BMap.NavigationControl(opts));
	
	var marker = new BMap.Marker(point);
	map.addOverlay(marker);
	
	var pointMenu=new BMap.ContextMenu();
	pointMenu.addItem(new BMap.MenuItem('选择该地点',function(point){
		$('#lat').html(point.lat);
		$('#lng').html(point.lng);
		marker.setPosition(point);
		
		map.panTo(point);
	}));
	map.addContextMenu(pointMenu);
	
	
	marker.enableDragging();
	marker.addEventListener("dragend", function(e){
		$('#lat').html(e.point.lat);
		$('#lng').html(e.point.lng);
	})

</script>